<route lang="jsonc" type="page">
{
  "layout": "default",
  "style": {
    "navigationBarTitleText": "忘记密码",
  },
}
</route>

<script lang="ts" setup>
const value = ref<string>('');
function handleChange(event) {
  console.log(event);
}

const columns = ref(['+86', '+87']);
const areaValue = ref('+86');

function handleConfirm({ value }) {
  areaValue.value = value;
}

// 跳到验证啊页面
function goVerify() {
  uni.navigateTo({
    url: '/pages/login/verificationCode?phone=' + value.value,
  });
}
</script>

<template>
  <view style="padding-top: 156rpx">
    <div class="logo">LOGO</div>

    <div class="login_content">
      <div class="mb-36rpx forgetBox">请填写找回密码的账号</div>

      <div class="input_content">
        <wd-input
          type="number"
          v-model="value"
          placeholder="请输入手机号"
          @change="handleChange"
          no-border
          custom-class="input_root"
        >
          <template #prefix>
            <wd-picker
              :columns="columns"
              v-model="areaValue"
              @confirm="handleConfirm"
            />
          </template>
        </wd-input>
      </div>

      <div
        class="mt-68rpx"
        style="width: 100%; display: flex; justify-content: center"
      >
        <div
          style="
            background-color: #000000;
            width: 100rpx;
            height: 100rpx;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
          "
          @click="goVerify"
        >
          <span style="color: white">
            <wd-icon name="arrow-right1" size="22px"></wd-icon>
          </span>
        </div>
      </div>

      <div
        style="
          position: fixed;
          bottom: 92rpx;
          font-size: 28rpx;
          display: flex;
          justify-content: center;
        "
      >
        <wd-checkbox
          checked-color="#FF0800"
          :modelValue="true"
          shape="circle"
        />
        <span style="color: #999999"> 已阅读并同意</span>
        <span style="color: #ff0800">《用户协议》《隐私政策》</span>
      </div>
    </div>
  </view>
</template>

<style lang="scss" scoped>
.logo {
  // margin-top: 156rpx;
  display: flex;
  justify-content: center;

  font-family: Inter, Inter;
  font-weight: 600;
  font-size: 96rpx;
  color: #000000;
  text-align: left;
  text-transform: none;
}

.login_content {
  margin-top: 100rpx;

  padding-left: 50rpx;
  padding-right: 50rpx;
}

.input_content {
  width: 650rpx;
  height: 102rpx;
  border-radius: 30rpx 30rpx 30rpx 30rpx;
  border: 2rpx solid #d9d9d9;

  display: flex;
  align-items: center;
}

.input_root {
  width: 96%;
  margin-left: 32rpx;
  margin-right: 32rpx;
}

.forgetBox {
  font-family:
    Source Han Sans CN,
    Source Han Sans CN;
  font-weight: 500;
  font-size: 40rpx;
  color: #000000;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
</style>
